<template>
  <div class="home">
  		<nav  class="nav">
  			<div class="menu">
  			<Menu mode="horizontal" :theme="theme1" active-name="1">
		        <MenuItem name="1">
		        		<router-link to="/index">首页</router-link>
		        </MenuItem>
		        <MenuItem name="2">
		        	<router-link to="/">分类日记</router-link>
		        </MenuItem>
		        <MenuItem name="3">
		        	<router-link to="/">个人作品</router-link>
		        </MenuItem>
		        <MenuItem name="4">
		        	<router-link to="/">生活随想</router-link>
		        </MenuItem>
		        <MenuItem name="5">
		        	<router-link to="/">关于我</router-link>
		        </MenuItem>
		    </Menu>
		    </div>
  		</nav>
  		<div class="main">
  			<div class="leftConten">
  					<router-view/>
  			</div>
  			<div class="RightConten">
  					<!--登入过后-->
  					<div class="Admininfo" v-if="shows">
  							<div class="pix">
  								<img src="../../build/logo.png" />
  							</div>
  							<div class="abstract">
  								<p class="myName">{{username}}</p>
  								<div>
  									<p v-if="isAdmin">你好管理员<router-link to="/admin" class="tiao">进入管理</router-link></p>
  									<p v-else><span class="colDanger">你好，欢迎光临我的博客！</span></p>
  								</div>
  								
  								<p class="edit"><Button type="info" size="small" @click="modal1 = true">修改</Button><Button type="error" size="small" @click="logout()">退出</Button></p>
  							</div>
  					</div>
  				  <!--登入-->
  				  <div v-else="">
	  					<div class="login" v-if="regin">
	  						<div>
	  							<p class="login-title">登录</p>
	  							<Form ref="formInline1" :model="formInline1" :rules="formInline1" :label-width="60" class="form">
	  								<FormItem label="用户名：">
					            	<Input v-model="formInline1.user" placeholder=""></Input>
					        	</FormItem>
					        	<FormItem label="密码：">
					            	<Input v-model="formInline1.password" placeholder=""></Input>
					        	</FormItem>
					        	<FormItem label="">
					            	<Button type="warning" size="large" @click="login()">登录</Button>
					        	</FormItem>
						    </Form>
						    <p class="tig">
						    	还没注册？<a href="javascript:;" @click="rightBoxshow">马上注册</a>
						    </p>
	  						</div>
	  					</div>
	  					<!--注册-->
	  					<div class="rightBox" v-else="">
	  						<div>
	  							<p class="login-title">注册</p>
	  							<Form ref="formInline" :model="formInline" :rules="formInline" :label-width="75" class="form">
	  								<FormItem label="用户名：">
					            	<Input v-model="formInline.user" placeholder=""></Input>
					        	</FormItem>
					        	<FormItem label="密码：">
					            	<Input v-model="formInline.password" placeholder=""></Input>
					        	</FormItem>
					        	<FormItem label="确认密码：">
					            	<Input v-model="formInline.repassword" placeholder=""></Input>
					        	</FormItem>
					        	<FormItem label="">
					            	<Button type="warning" size="large" @click='register()'>注册</Button>
					        	</FormItem>
						    </Form>
						    <p class="tig">
						    	已有账号？<a href="javascript:;" @click="rightBoxshow1()">马上登录　</a>
						    </p>
	  						</div>
	  					</div>
  					</div>
  					<div class="newArtic">
  						<p class="login-title">最新文章</p>
  						<ul class="listUl">
  							<li><a href="#">浏览器对es modules 的一些解析</a></li>
  							<li><a href="#">浏览器对es modules 的一些解析</a></li>
  							<li><a href="#">浏览器对es modules 的一些解析</a></li>
  							<li><a href="#">浏览器对es modules 的一些解析</a></li>
  							<li><a href="#">浏览器对es modules 的一些解析</a></li>
  							<li><a href="#">浏览器对es modules 的一些解析</a></li>
  						</ul>
  					</div>
  			</div>
  		</div>
  		
  		<Modal
        v-model="modal1"
        title="信息修改"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formInline" :model="formInline" :rules="formInline" :label-width="75" class="form">
					<FormItem label="用户名：">
	            	<Input v-model="formInline.user" placeholder=""></Input>
	        	</FormItem>
	        	<FormItem label="密码：">
	            	<Input v-model="formInline.password" placeholder=""></Input>
	        	</FormItem>
	        	<FormItem label="确认密码：">
	            	<Input v-model="formInline.repassword" placeholder=""></Input>
	        	</FormItem>
		    </Form>
		    <form action="http://localhost:3006/api/user/file" enctype="multipart/form-data" method="post">
			    <input type="text" name="title"><br>
			    <input type="file" name="tupian" />
			    <input type="submit" value="Upload">
		    </form>
    </Modal>
  </div>
</template>

<script>
import api from '../kits/api'
export default {
  name: 'home',
  data () {
    return {
    	username:'',
    	address:'',
    	file: null,
      loadingStatus: false,
      theme1:'light',
      formInline: {
	        user: '',
	        password: '',
	        repassword:''
	    },
	    formInline1: {
	        user: '',
	        password: '',
	    },
	    shows:'',//信息显示
	    regin:true,//注册
	    modal1: false,//修改弹窗
	    isAdmin:false,
    }
  },
  mounted:function(){
  	this.address = api.upload
  	this.shows = sessionStorage._id
		this.isAdmin = sessionStorage.isAdmin ==='false'?false:true
  },
  methods: {
        ok () {
            this.$Message.info('Clicked ok');
        },
        cancel () {
            this.$Message.info('Clicked cancel');
        },
        //显示与否
        rightBoxshow(){
        		this.regin = false
        },
        rightBoxshow1(){
        	this.regin = true
        },
        
        clear(){
        	this.formInline.user=''
        	this.formInline.password=''
        	this.formInline1.user=''
        	this.formInline1.password=''
        	this.formInline.repassword=''
        },
        //注册
        register(){
        	if(this.formInline.repassword == '' || this.formInline.password == '' || this.formInline.password != this.formInline.repassword){
        		this.$Message.error('密码不能为空或两次密码不一样');
        		return false;
        	}else{
        		this.$axios.post(api.register,{
                username:this.formInline.user,
                password:this.formInline.password,
	          }).then((res) => {
	          	  if( res.data.code==0){
	          	  		this.clear()
	          	  		this.$Message.error(res.data.message);
	          	  }else{
	          	  	this.clear()
		          	  this.regin = false
									this.$Message.error(res.data.message);
	          	  }
	          	  
						});
        	}
        },
        //登录
        login(){
        	var me = this
        	if(this.formInline1.user == '' || this.formInline1.password == ''){
        		this.$Message.error('用户名或密码不能为空');
        		return false;
        	}else{
        		this.$axios.post(api.login,{
                username:this.formInline1.user,
                password:this.formInline1.password,
	         }).then((res) => {
	          		if(res.data.code==0){
	          			sessionStorage._id = res.data.userInfo._id
	          			sessionStorage.isAdmin = res.data.userInfo.isAdmin
	          			sessionStorage.username = res.data.userInfo.username
	          			me.shows = sessionStorage._id
	          			me.isAdmin = res.data.userInfo.isAdmin
	          			me.username = sessionStorage.username
	          			me.clear()
	          		}else{
	          			me.clear()
								  me.$Message.error(res.data.message);
	          		}
	          		
						});
        	}
        },
        //显示隐藏
        isHide(){
        	
        },
        //退出
        logout(){
        		this.$axios.post(api.logout).then((res) => {
	          		if( res.data.code==0){
	          			  sessionStorage.clear();
	          			  this.shows = ''
	          			  this.clear()
//	          			sessionStorage._id = ''
//	          			sessionStorage.isAdmin = ''
	          		}
								this.$Message.error(res.data.message);
						});
        },
         handleUpload (file) {
                this.file = file;
                return false;
            },
        upload() {
//         this.$axios.post(api.file,{
//         }).then((res)=>{
//         		console.log(res)
//         })
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.home{
		position: relative;
	}
	.nav{
		height: 62px;
    border-top: 1px solid #ebebeb;
    border-bottom: 2px solid #e1e1e1;
    background: #fff;
	}
	.menu{
		text-align: center;
		width: 1000px;
		margin: auto;
	}
	.nav .ivu-menu-item{
		float: none;
		display: inline;
		padding: 21px 20px;
	}
	.nav .ivu-menu-item a{
		color: #2C3E50;
	}
	.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover{
		border-bottom: 2px solid #e67e22;
	}
	.main{
		width: 1100px;
		margin: auto;
		margin-top: 20px;
	}
	.main:after{
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}
	.leftConten{
		width: 750px;
		float: left;
	}
	.RightConten{
		width: 330px;
		float: right;
		
	}
	.login,.rightBox{
		padding: 20px;
		background: #fff;
	}
	.login-title{
		border-bottom: 1px solid #ccc;
		font-size: 16px;
		line-height: 30px;
		position: relative;
	}
	.login-title:before{
		content: '';
		display: block;
		height: 1px;
		width: 40px;
		position: absolute;
		bottom: -1px;
		left: 0;
		background: #e67e22;
	}
	.form{
		margin-top: 20px;
	}
	.form .ivu-form-item{
		margin-bottom: 20px;
	}
	.form .ivu-btn-warning{
		width: 100%;
	}
	.newArtic{
		background: #fff;
		padding: 20px;
		margin-top: 20px;
	}
	.listUl{
		margin-top: 10px;
	}
	.listUl li{
		line-height: 30px;
		text-indent: 10px;
	}
	.listUl li a{
		color: #666;
		font-size: 14px;
	}
	.tig{
		text-align: right;
	}
	.tig a{
		color: #e67e22;
		text-decoration: underline;
	}
	.Admininfo{
		padding: 20px;
		background: #fff;
	}
	.Admininfo:after{
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}
	.pix{
		width: 120px;
		float: left;
	}
	.pix img{
		width: 120px;
		height: 120px;
		border-radius: 50%;
		display: block;
	}
	.abstract{
		float: left;
		width: 170px;
	}
	.abstract p{
		line-height: 30px;
	}
	.myName{
		font-size: 14px;
	}
	.tiao{
		margin-left: 10px;
		color: #e67e22;
	}
	.edit{
		text-align: left;
	}
	.edit button{
		margin-left: 15px;
	}
</style>
